<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    姓名:<input type="text" class="name" /><br />
    网址:<input type="text" class="web" /><br />
    qq号:<input type="text" class="qq" /><br />
    手机号:<input type="text" class="phone" /><br />
    身份证:<input type="text" class="ID" /><br />
    邮箱:<input type="text" class="email" />
    <input type="submit" value="提交" />
    <hr />
    <span class="info">提示信息</span>
    <script>
      // 姓名
      //   var nameEle = document.querySelector(".name");
      //   var infoEle = document.querySelector(".info");

      //   nameEle.onblur = function () {
      //   var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
      //     var name = nameEle.value;
      //     if (reg.test(name)) {
      //       infoEle.innerHTML = "姓名符合规则";
      //       infoEle.style.color = "green";
      //     } else {
      //       infoEle.innerHTML = "姓名不符合规则";
      //       infoEle.style.color = "red";
      //     }
      //   };
      //   QQ号
      //   var qqEle = document.querySelector(".qq");
      //   var infoEle = document.querySelector(".info");

      //   qqEle.onblur = function () {
      //     var qq = qqEle.value;
      //     var reg = /^[1-9]\d{4,10}$/g;
      //     if (reg.test(qq)) {
      //       infoEle.innerHTML = "qq符合规则";
      //       infoEle.style.color = "green";
      //     } else {
      //       infoEle.innerHTML = "qq不符合规则";
      //       infoEle.style.color = "red";
      //     }
      //   };
      // 网址
      //   var webEle = document.querySelector(".web");
      //   var infoEle = document.querySelector(".info");
      //   webEle.onblur = function () {
      //     var web = webEle.value;

      //     var reg = /^https?:\/\/www\.\w{2,}(\.\w{3})$|(\.\w{3}\.\w{2})$/;
      //     if (reg.test(web)) {
      //       infoEle.innerHTML = "网址符合规则";
      //       infoEle.style.color = "green";
      //     } else {
      //       infoEle.innerHTML = "网址不符合规则";
      //       infoEle.style.color = "red";
      //     }
      //   };
      // 手机号
      //   var phoneEle = document.querySelector(".phone");
      //   var infoEle = document.querySelector(".info");
      //   phoneEle.onblur = function () {
      //     var phone = phoneEle.value;

      //     var reg = /^1[3-9]\b{9}$/;
      //     if (reg.test(phone)) {
      //       infoEle.innerHTML = "手机号符合规则";
      //       infoEle.style.color = "green";
      //     } else {
      //       infoEle.innerHTML = "手机号不符合规则";
      //       infoEle.style.color = "red";
      //     }
      //   };
      var phoneEle = document.querySelector(".phone");
      var infoEle = document.querySelector(".info");
      phoneEle.onblur = function () {
        var val = this.value;
        var reg = /^1[3-9]\d{9}$/g;
        console.log(val);
        if (reg.test(val)) {
          infoEle.innerHTML = "手机号符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "手机号不符合规则";
          infoEle.style.color = "red";
        }
      };
      // 身份证 ：18位  最后一位可以是X
      var idEle = document.querySelector(".ID");
      var infoEle = document.querySelector(".info");
      idEle.onblur = function () {
        var val = this.value;
        var reg = /^[1-9]\d{16}\d$|X$/g;
        console.log(val);
        if (reg.test(val)) {
          infoEle.innerHTML = "身份证符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "身份证不符合规则";
          infoEle.style.color = "red";
        }
      };
      // 邮箱验证

      var emailEle = document.querySelector(".email");
      var infoEle = document.querySelector(".info");
      emailEle.onblur = function () {
        var val = this.value;

        var reg = /^\w+@\w+((\.\w{3})|(\.\w{3}\.\w{2}))$/g;
        console.log(val);
        if (reg.test(val)) {
          infoEle.innerHTML = "邮箱符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "邮箱不符合规则";
          infoEle.style.color = "red";
        }
      };
    </script>
  </body>
</html>
